<template>
  <el-upload
    class="upload-demo"
    :action="uploadApi"
    list-type="text"
    :multiple="true"
    :file-list="fileList"
    :show-file-list="true"
    :on-remove="handleRemove"
    :limit="limit"
    :on-success="handleSuccess"
    :on-exceed="handleExceed"
  >
    <!--:before-upload="beforeUpload"-->
    <el-button icon='el-icon-upload' :style="{background:color,borderColor:color}" size="small" type="primary">点击上传
    </el-button>
  </el-upload>
</template>

<script>
import Cookies from 'js-cookie';

export default {
  name: 'editor-app',
  props: {
    color: {
      type: String,
      default: '#1890ff',
    },
    limit: {
      type: Number,
      default: 5,
    },
    url: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      uploadApi: `${api.UPLOAD_PIC  }?token=${  Cookies.get(consts.CACHE_TOKEN)  }&uid=${  Cookies.get(consts.CACHE_UID)}`,
      dialogVisible: false,
      listObj: {},
      fileList: [],
    };
  },
  watch: {
    url(val) {
      if (this.url != '' || this.url === undefined) {
        this.fileList.push({ name: '文件' + this.fileList.length + 1, url: this.url });
      }
    },
  },
  methods: {
    handleSuccess(response, file) {
      if (response.code === 1) {
        response = response.data;
        this.$emit('successCBK', _.assign({ responseUrl: response }, file));
      } else {
        this.$notify.error(response.message);
      }
    },
    handleRemove(file) {
      this.$emit('successCBK', '');
    },
    beforeUpload(file) {
      const _self = this;
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('文件大小不能超过 10MB!');
      }
    },
    handleExceed(files, fileList) {
      this.$notify.error(`文件数量超出限制，最多上传${this.limit}个`);
    },
  },
  mounted() {

  },
};
</script>

<style lang="scss" scoped>
  .editor-slide-upload {
    margin-bottom: 20px;
  }
</style>
